<script setup>
import {h, ref, onMounted, toRef, onUnmounted, watch} from "vue";
import {NIcon,createDiscreteApi} from "naive-ui";
import {RouterLink,useRouter,useRoute } from "vue-router";
import {
  GameControllerOutline as GameIcon,
  EyedropOutline as RecordIcon,
  TerminalOutline as UpdateIcon,
  PersonOutline as PersonIcon
} from "@vicons/ionicons5";
import {useTokenStore} from "@/stores/token.js";
import {userGetInfoAPI} from "@/api/user.js";
import {useUserStore} from "@/stores/user.js";
import emitter from "@/utils/emitter.js"
import {serverBaseURL} from "@/utils/request.js"
import {resetUserInfo} from "@/utils/compute.js"

const {message} = createDiscreteApi(
    ["message", 'dialog', 'notification', 'loadingBar', 'modal']
)
function renderIcon(icon) {
  return () => h(NIcon, null, {default: () => h(icon)});
}

const menuOptions = [
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "gl",
            // path: "/home/game",
          }
        },
        {default: () => "游戏页面"}
    ),
    key: "/home/game",
    icon: renderIcon(GameIcon)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            path: "/home/message",
          }
        },
        {default: () => "个人信息"}
    ),
    key: "/home/message",
    icon: renderIcon(PersonIcon)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            path: "/home/record",
          }
        },
        {default: () => "个人战绩"}
    ),
    key: "/home/record",
    icon: renderIcon(RecordIcon)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            path: "/home/update",
          }
        },
        {default: () => "修改密码"}
    ),
    key: "/home/update",
    icon: renderIcon(UpdateIcon)
  },
];

const hua = () => {
  emitter.emit("initChessBoard")

}
const tokenStore = useTokenStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
let user = toRef(userStore,'user')

onMounted(async () => {
  let result = await userGetInfoAPI()
  console.log("userInfo",result);
  result = resetUserInfo(result)
  userStore.setUser(result.data)
})


onUnmounted(() => {

})

// 路由跳转
const goto = (path)=>{
  router.push(path)
}

const dialogVisible = ref(false)
// 退出登录按钮
const outLoginBtn = ()=>{
  dialogVisible.value=true
}
// 退出登录
const outLogin = ()=>{
  dialogVisible.value=false
  userStore.removeUser()
  tokenStore.removeToken()
  goto("/")
  message.success("退出成功，慢走不送~")
}

</script>

<template>
  <n-layout has-sider>
    <n-layout-sider content-style="padding: 24px; height: 100vh">
      <n-menu :options="menuOptions" :value="route.path" default-value="game"/>
    </n-layout-sider>
    <n-layout>
      <n-layout-header>
        <n-card>
          <div class="cardContent">
            <n-button @click="hua">开画</n-button>
            <div style="margin:0 60px 10px 20px;font-size: 20px; font-weight: 300">
              {{ user.username }}
            </div>
            <div class="avatarBox">
              <n-avatar
                round
                :size="50"
                :src="serverBaseURL+user.avatar"
                style="margin-right: 50px"
              /> 
              <div class="avaBar">
                <p><i class="iconfont icon-xunzhang"></i>{{user.nowRank}}</p>
                <hr style="border-color:#fff; margin:0 0 5px 0;">
                <div @click="goto('/home/message')">个人信息</div>
                <div @click="goto('/home/record')">个人战绩</div>
                <div @click="goto('/home/update')">修改密码</div>
                <div @click="outLoginBtn">退出登录</div>
              </div>
              <el-dialog
                class="outLoginDialog"
                v-model="dialogVisible"
                title="提示"
                width="300"
                :close-on-click-modal="false"
              >
                <span>您确定要退出登录吗？</span>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="outLogin">确认</el-button>
                  </div>
              </template>
              </el-dialog>
            </div>
           
          </div>
        </n-card>
      </n-layout-header>
      <n-layout-content content-style="padding: 24px;">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component"></component>
            </keep-alive>
          </router-view>
      </n-layout-content>

    </n-layout>
  </n-layout>
</template>

<style scoped  lang="less">
.n-card{
  .cardContent{
    display: flex;
    justify-content: end;
    align-items: center;
    .avatarBox{
      cursor: pointer;
      position: relative;
      .n-avatar{
        z-index: 3;
        transition: 0.3s;
      }
      .avaBar{
        opacity: 0;
        height: 0;
        width: 130px;
        line-height: 40px;
        padding-top: 30px;
        text-align: center;
        position: absolute;
        top: 25px;
        left: -40px;
        z-index: 2;
        background: #fff;
        box-shadow: 0 0 10px 0 #eee;
        border-radius: 5px;
        overflow: hidden;
        transition: 0.4s;
        >p{
          display: flex;
          align-items: center;
          justify-content: center;
          i{
            margin-right: 10px;
          }
        }
      }
      &:hover{
        transition: 0.3s;
        .n-avatar{
          transform: scale(1.1);
          transition: 0.3s;
        }
        .avaBar{
          opacity: 1;
          height: auto;
          transition: 0.4s;
          >div{
            &:hover{
              background: #f0eded;
            }
          }
        }
      }
     .outLoginDialog{
      .dialog-footer{
        .el-button{
          width: 60px;
        }
      }
     } 
    }
    .n-button{
      width: 90px;
      margin-right: 200px
    }
  }
}

</style>